import styled from "styled-components";

export const CenterWapper = styled.div`
  .search-bar {
    width: 313px;
    height: 48px;
    border: 1px solid ${props => props.theme.border.primaryColor};
    border-radius:22px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    ${props => props.theme.mixin.boxShadow};
    .search-input {
      flex: 1;
      display: flex;
      justify-content: space-around;
      .text {
        &:last-child {
          color: ${props => props.theme.text.primaryColor};
        }
      }
    }
    .icon {
      /* display: flex;
      align-items: center;
      justify-content: center; */
      padding: 10px;
      color: white;
      background-color: ${props => props.theme.color.primaryColor};;
      border-radius: 50%;
    }
  }



  .search-detail {
    position: relative;
    /* transform-origin: 50% 0;
    will-change: transform, opacity; */
    .info {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .bar-enter {
    transform: scale(2.85714, 1.375) translateY(58px);
    opacity: 0;
  }
  .bar-enter-active {
    transform: scale(1.0) translateY(0);
    opacity: 1;
    transition: all 250ms ease;
  }
  .bar-exit {
    opacity: 0;
  }
  /* .bar-exit-active {

  } */
  .search-enter {
    transform: scale(0.35, 0.727273) translateY(-40px);
    opacity: 0;
  }
  .search-enter-active {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: all 250ms ease;
  }
  .search-exit {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  .search-exit-active {
    transform: scale(0.35, 0.727273) translateY(-40px);
    opacity: 0;
    transition: all 250ms ease;
  }


`